<script>
import GradeGauge from "@/components/GradeGauge.vue"
import RingGauge from "@/components/RingGauge.vue";
import SideRecommend from "@/components/SideRecommend.vue";
import Progress from '@/components/Progress.vue'
import Exam from "@/components/Exam.vue";
import FloatBtn from "@/components/FloatBtn.vue";
import ElTree from "@/components/ElTree.vue";

export default {
  components: {
    FloatBtn,
    Exam,
    SideRecommend,
    RingGauge,
    GradeGauge,
    Progress,
    ElTree
  },
  data() {
    return {
      /**
       * 已掌握的题数
       */
      active: 0,
      mastered: 30,
      /**
       * 未掌握的题数
       */
      notMastered: 13,
      /**
       * 正确的题数
       */
      correct: 45,
      /**
       * 错误的题数
       */
      wrong: 15,
      /**
       * 习题数
       */
      exercisesNum: 100,
      /**
       * 课程列表
       */
      courseItems: [
        {
          id: 1,
          imageSrc: require("@/assets/img/python教程.png"),
          description: "Python基础应用"
        },
        {
          id: 2,
          imageSrc: require("@/assets/img/离散数学_东北大学(全69讲).144255360.jpeg"),
          description: "离散数学 东北大学"
        },
        {
          id: 3,
          imageSrc: require("@/assets/img/算法设计与分析_-_北航童咏昕教授.367057689.png"),
          description: "算法设计与分析"
        },
      ],
      /*
      * 教辅资源列表
       */
      docItems: [
        {
          id: 1,
          imageSrc: this.getSvgImage("Python U1 教案"),
          description: "Python U1 教案"
        },
        {
          id: 2,
          imageSrc: this.getSvgImage("Python U1 PPT"),
          description: "Python U1 PPT"
        },
        {
          id: 3,
          imageSrc: this.getSvgImage("Python U1 代码实例"),
          description: "Python U1 代码实例"
        },
        // 添加更多的项
      ],
      drawer: false,//抽屉
      //treeData
      getNodeData(data) {
        console.log('data:', data)
      },
    }
  },
  computed: {
    // 使用计算属性来动态计算掌握的百分比
    masteredPercent() {
      return (this.mastered / (this.mastered + this.notMastered) * 100).toFixed(1);
    },

    // 使用计算属性来动态计算正确率
    correctPercent() {
      return this.correct / (this.correct + this.wrong) * 100;
    },
  },
  methods: {
    getSvgImage(description) {
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    },
    next() {
        if (this.active++ > 2) this.active = 0;
      }
  },
}
</script>

<template>
  <div>
    <FloatBtn></FloatBtn>
    <div class="row">
      <div class="col-12">
        <card>
          <div class="row">
            <span class="deco"></span>
            <h2 class="clearMargin">面向对象程序设计</h2>
              <el-button @click="drawer = true" style="margin-left: 16px;" type="warning" icon="el-icon-s-order" circle></el-button>
            <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" direction="ttb">
              <el-steps :active="active" finish-status="success" style="margin-top: 108px;" align-center>
                <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
                <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
                <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
              </el-steps>

              <el-button style="margin-top: 25px;margin-left: 805px;" @click="next">下一步</el-button>
            </el-drawer>
          </div>
        </card>
      </div>

      <div class="col-12">
        <card>
          <h3 class="card-title" style="text-align: left"> 课程情况概览</h3>
          <div class="row" style="height: 300px;">
            <div class="col-lg-5" style="height: 280px;overflow: auto;scrollbar-width: none">
              <div class="row" style="margin-left: 25px;margin-top: 15px;">
                <div class="col-2">
                  <h4 class="text-muted clearMargin">习题数</h4>
                  <h1 class="clearMargin">{{ this.exercisesNum }} <a class="text-muted h4">道</a></h1>

                </div>
                <div class="col-5">
                  <h4 class="text-muted clearMargin" style="margin-left: 70px">作业数</h4>
                  <h1 class="clearMargin" style="margin-left: 10px;">1/4 <a class="text-muted h4">个</a> <a
                      class="h4">平均分:95</a></h1>

                </div>
                <div class="col-5">
                  <h4 class="text-muted clearMargin" style="margin-left: 50px">测验数</h4>
                  <h1 class="clearMargin">2/2<a class="text-muted h4">个</a> <a class="h4">平均分:95</a></h1>

                </div>
              </div>
            </div>
            <div class="col-lg-7" id="center">
              <card>
                <!--                <h3 class="card-title" style="text-align: left;margin-bottom: 2rem">-->
                <!--                  TDA指标-->
                <!--                  <a class="text-muted" style="text-align: right;font-size: 14px">T=Time D=Difficult A=Accuracy</a>-->
                <!--                </h3>-->
                <h1 class="TDA" style="text-align: center">TDA / 7.6</h1>
                <p class="text-muted ">TDA数值越高表示该环节的水平越高</p>
                <h4>击败了全校<a style="color:#2e63f3;">44%</a>的学生</h4>
                <div style="height: 2.3rem;"></div>
                <hr>
                <div class="row">
                  <div class="col-4">
                    <h1 class="clearMargin">7.4 <a class="text-muted h4">s</a></h1>
                    <h4 class="text-muted clearMargin">平均用时</h4>
                  </div>
                  <div class="col-4">
                    <h1 class="clearMargin">86 <a class="text-muted h4">%</a></h1>
                    <h4 class="text-muted clearMargin">正确率</h4>
                  </div>
                  <div class="col-4">
                    <h1 class="clearMargin">0.54</h1>
                    <h4 class="text-muted clearMargin">平均难度</h4>
                  </div>
                </div>
              </card>
            </div>
          </div>
        </card>
      </div>

      <div class="col-lg-6" style="height: 16.5rem">
        <card>
          <h3 class="card-title" style="text-align: left"> 等级评价</h3>
          <GradeGauge :ring-value="0.78"></GradeGauge>
        </card>
      </div>
      <div class="col-lg-6" id="center">
        <card>
          <h3 class="card-title" style="text-align: left"> 知识点掌握情况</h3>
          <div class="row">
            <div class="col-6">
              <div style="width: 100%;height: auto;">
                <RingGauge :value="masteredPercent" name="知识点掌握" />
                <h4 class="text-muted" style="text-align: center">已掌握：{{ mastered }} | 未掌握：{{ notMastered }}</h4>
              </div>
            </div>
            <div class="col-6">
              <div style="width: 100%;height: auto;">
                <RingGauge :color="['#ffb497', '#ff4100']" :value="correctPercent" name="答题正确率" />
                <h4 class="text-muted" style="text-align: center">答对题数：{{ correct }} | 答错题数：{{ wrong }}</h4>
              </div>
            </div>
          </div>
        </card>
      </div>

      <div class="col-lg-6">
        <card>
          <h3 class="card-title" style="text-align: left"> 知识点明细</h3>
          <Progress :title="'Java的起源和发展'" :width="100" :progress="90" :strokeWidth="10" :showInfo="true" />
          <hr>
          <Progress :title="'Java的特点'" :width="100" :progress="79" :strokeWidth="10" :showInfo="true" />
          <hr>
          <Progress :title="'Java的运行原理'" :width="100" :progress="60" :strokeWidth="10" :showInfo="true" />
          <hr>
          <Progress :title="'JDK及其安装和配置'" :width="100" :progress="17" :strokeWidth="10" :showInfo="true" />
        </card>

      </div>
      <div class="col-lg-6">
        <card>
          <h3 class="card-title" style="text-align: left"> 练习一下</h3>
          <exam style="min-height: 20.1rem"></exam>
        </card>
      </div>

      <!-- <div class="col-lg-6">
        <side-recommend category="doc">
          <template v-slot:title>推荐课件</template>
        </side-recommend>
      </div>
      <div class="col-lg-6">
        <side-recommend category="course">
          <template v-slot:title>推荐课程</template>
        </side-recommend>
      </div> -->


    </div>
  </div>
</template>

<style scoped>
#center {
  text-align: center;
}
</style>

<style>
.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}

.clearMargin {
  margin-bottom: 0.5rem;
}

.custom-tree-height {
  height: 200px;
  /* 设置你需要的高度 */
  overflow-y: auto;
  /* 如果需要滚动条 */
}
</style>
